<template >
  <el-dialog :title="title || `详情`"
             v-dialogDrag="dialogDrag"
             center
             v-if="detailVisible"
             v-bind:visible="detailVisible"
             v-on:update:visible="UpdateVisible"
             :width="width">
    <div :class="direction=='row'?'FlexRow':'FlexCol'">
      <template v-for="(descriptions, i) in dataType">
        <el-descriptions :key="i"
                         :style="Object.assign({}, descriptions.style)"
                         v-if="!descriptions.if || descriptions.if()"
                         v-bind="Object.assign({}, descriptionsAttr, descriptions.attrs)">
          <template v-for="(item, index) in descriptions.list">
            <template v-if="!item.if || item.if()">
              <!-- 遍历输入类型对象设置 -->
              <el-descriptions-item :key="index"
                                    v-if="!item.type || item.type == 'text'"
                                    :label="item.label"
                                    :span="item.span">
                <div class="ContentDiv">{{ _GetValue(item) }}</div>
              </el-descriptions-item>
              <slot v-else-if="item.type == 'slot'"
                    :name="item.key"> </slot>

              <el-descriptions-item :key="index"
                                    v-else-if="item.type == 'imageList'"
                                    :label="item.label"
                                    :span="item.span">
                <el-image class="ImageItem"
                          v-for="(image, i) in data[item.key]"
                          :key="i"
                          :src="image"
                          :preview-src-list="data[item.key]"
                          fit="contain"></el-image>
              </el-descriptions-item>
              <el-descriptions-item :key="index"
                                    v-else-if="item.type == 'videoList'"
                                    :label="item.label"
                                    :span="item.span">
                <div v-for="(video, i) in data[item.key]"
                     :key="i">
                  <el-link :href="video"
                           target="_blank"
                           icon="el-icon-video-play">视频链接【{{ i + 1 }}】<i class="el-icon-view el-icon--right"></i></el-link>
                </div>
              </el-descriptions-item>
            </template>
          </template>
        </el-descriptions>
      </template>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 @click="UpdateVisible(false)">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'detailDialog',
  props: {
    title: String,
    width: {
      type: String,
      default: '60%'
    },
    visible: Boolean,
    dialogDrag: {
      type: Boolean,
      default: true
    },
    direction: {
      type: String,
      default: "col"
    },
    data: Object,
    dataType: Array
  },
  data () {
    return {
      descriptionsAttr: {
        border: true,
        size: 'mini',
        labelStyle: { width: '150px' }
      }
    };
  },
  created () { },
  watch: {},
  computed: {
    detailVisible: function () {
      return this.visible;
    }

  },
  methods: {
    UpdateVisible (e) {
      this.$emit('update:visible', e);
    },
    _GetValue (item) {
      let value;
      if (item.key instanceof Array) {
        let _temp = this.data;
        for (let it in item.key) {
          _temp = _temp[item.key[it]];
          if (_temp == undefined) break;
        }
        value = _temp;
      } else {
        value = this.data[item.key];
      }
      return item.format ? item.format(this.data, value) : value;
    }
  }
};
</script>

<style scoped>
.ImageItem {
    height: 100px;
    width: 100px;
    border: 1px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
.VideoItem {
    height: 150px;
    width: 250px;
    border: 1px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
.descriptionsItemLabel {
    background: red;
}
.ContentDiv {
}
</style>